<template>
    <div class="main-page-content page-demo-step">
        <ContentHeader title="这里是功能点度量页面" explain="在本页面设置您的各类功能点数量与系统特征，将根据功能点度量的方法为您得出系统的规模度量结果"></ContentHeader>
        <div class="page-content">

            <!-- 步骤条 start -->
            <a-row>
                <a-col :span="18" :offset="3">
                    <a-steps :current="active_step">
                        <a-step>
                            <template slot="title">第一步</template>
                            <span slot="description">填写功能点数量</span>
                        </a-step>
                        <a-step>
                            <template slot="title">第二步</template>
                            <span slot="description">填写技术因子影响程度</span>
                        </a-step>
                        <a-step>
                            <template slot="title">第三步</template>
                            <span slot="description">完成</span>
                        </a-step>
                    </a-steps>
                </a-col>
            </a-row>
            <!-- 步骤条 end -->
            <!-- 步骤表单 start -->
            <div class="step_form" v-show="active_step == 0">
                <a-spin tip="Loading..." :spinning="form_show_loading">
                    <template>
                        <span>
                            <h1>当前计算UFC结果为：{{ ufc }}</h1>
                        </span>

                        <a-divider />
                        <a-table :columns="columns" :data-source="data" bordered :pagination="false">
                            <template v-for="col in ['simple', 'average', 'complex']" :slot="col"
                                slot-scope="text, record, index">
                                <div :key="col">
                                    <a-input v-if="record.editable" style="margin: -5px 0" :value="text"
                                        @change="e => handleChange(e.target.value, record.key, col)" />
                                    <template v-else>
                                        {{ text }}
                                    </template>
                                </div>
                            </template>
                            <template slot="operation" slot-scope="text, record, index">
                                <div class="editable-row-operations">
                                    <span v-if="record.editable">
                                        <a @click="() => save(record.key)">Save</a>
                                        <a-popconfirm title="Sure to cancel?" @confirm="() => cancel(record.key)">
                                            <a>Cancel</a>
                                        </a-popconfirm>
                                    </span>
                                    <span v-else>
                                        <a :disabled="editingKey !== ''" @click="() => edit(record.key)">Edit</a>
                                    </span>
                                </div>
                            </template>
                        </a-table>
                    </template>

                    <!-- <a-form-model-item :wrapper-col="{ span: 10, offset: 8 }">
                        <a-button type="primary" @click="onSubmit('formDataStep1',2)">下一步</a-button>
                        <a-button style="margin-left: 10px;" @click="resetForm('formDataStep1')">重置</a-button>
                    </a-form-model-item> -->
                    <a-divider />

                    <a-form-model-item>
                        <a-button style="float: left;" @click="resetUFC">重置</a-button>
                        <a-button type="primary" @click="next()" style="float: right;">下一步</a-button>
                    </a-form-model-item>

                </a-spin>
                <div style="height:46px"></div>
            </div>
            <!-- 步骤表单 end -->

            <!-- 步骤表单 start -->
            <div class="step_form" v-show="active_step == 1">
                <a-spin tip="Loading..." :spinning="form_show_loading">
                    <span>
                        <h1>当前计算VAF结果为：{{ vaf }}</h1>
                    </span>
                    <a-divider />
                    <a-table :columns="columns1" :data-source="data1" bordered :pagination="false">
                        <template v-for="col in ['rank']" :slot="col" slot-scope="text, record, index">
                            <div :key="col">
                                <a-input v-if="record.editable" style="margin: -5px 0" :value="text"
                                    @change="e => handleChange1(e.target.value, record.key, col)" />
                                <template v-else>
                                    {{ text }}
                                </template>
                            </div>
                        </template>
                        <template slot="operation" slot-scope="text, record, index">
                            <div class="editable-row-operations">
                                <span v-if="record.editable">
                                    <a @click="() => save1(record.key)">Save</a>
                                    <a-popconfirm title="Sure to cancel?" @confirm="() => cancel1(record.key)">
                                        <a>Cancel</a>
                                    </a-popconfirm>
                                </span>
                                <span v-else>
                                    <a :disabled="editingKey1 !== ''" @click="() => edit1(record.key)">Edit</a>
                                </span>
                            </div>
                        </template>
                    </a-table>
                    <span>计算出VAF为：{{ vaf }}</span>
                    <a-divider />
                    <a-form-model-item>
                        <a-button type="primary" @click="pre()" style="float:left">上一步</a-button>
                        <a-button style="float:left;margin-left: 10px;width: 80px;" @click="resetVAF">重置</a-button>
                        <a-button type="primary" @click="next()" style="float:right">下一步</a-button>
                    </a-form-model-item>
                <div style="height:46px"></div>
                </a-spin>
            </div>
            <!-- 步骤表单 end -->

            <!-- 步骤表单 start -->
            <div class="step_form" v-show="active_step == 2">
                <a-spin tip="Loading..." :spinning="form_show_loading">
                    
                        <a-result status="success" v-bind:title="'功能点度量结果为：'+vaf * ufc" sub-title="点击“确认”计算下一个项目，点击“上一步”修改当前项目参数" style="width:50%;margin:0px auto;">
                            <template #icon>
                                <a-icon type="check-circle" />
                                <!-- <a-icon type="smile" theme="twoTone" /> -->
                            </template>
                        </a-result>
                        <a-form-model-item :wrapper-col="{ span: 10, offset: 10 }">
                            <a-button  type="primary" @click="pre" style="width:80px;">上一步</a-button>

                            <a-button type="primary" @click="sure" style="margin-left: 25px;width: 80px;">确认</a-button>
                        </a-form-model-item>
                </a-spin>
                <div style="height:46px"></div>
            </div>
            <!-- 步骤表单 end -->

        </div>
        <ContentFooter explain="功能点度量方法是利用软件需求分析度量软件规模。">
            <div class="helpnote">
                <div>
                    1. 功能点的计算：<br />
                    （1）未调整功能点计数UFC=求和（某项目的数量×其对应的权重因子）<br />
                    （2）调整因子VAF=0.65+0.01*（14个影响因子之和）<br />
                    （3）调整后功能点数FP=UFC*VAF<br />
                </div>
                <div>
                    2. 功能点度量的应用：<br />
                    预测软件规模、计算缺陷密度、估算软件工作量、估算软件成本、计划开发时间、计划人员安排<br />
                </div>

            </div>
        </ContentFooter>

    </div>
</template>

<script>
import ContentHeader from "@/components/content_header/content_header";
import ContentFooter from "@/components/content_footer/content_footer";
const columns = [
    {
        title: '测量元素',
        dataIndex: 'name',
        width: '30%',
        align: 'center',
        scopedSlots: { customRender: 'name' },
    },
    {
        title: 'Simple',
        dataIndex: 'simple',
        width: '15%',
        align: 'center',
        scopedSlots: { customRender: 'simple' },
    },
    {
        title: 'Average',
        dataIndex: 'average',
        align: 'center',
        width: '15%',
        scopedSlots: { customRender: 'average' },
    },
    {
        title: 'Complex',
        dataIndex: 'complex',
        align: 'center',
        width: '15%',
        scopedSlots: { customRender: 'complex' },
    },
    {
        title: 'Operation',
        dataIndex: 'operation',
        align: 'center',
        scopedSlots: { customRender: 'operation' },
    },
];
const columns1 = [
    {
        title: '序号',
        dataIndex: 'order',
        width: '10%',
        align: 'center',
        scopedSlots: { customRender: 'order' },
    },
    {
        title: '技术复杂度因子',
        dataIndex: 'name',
        width: '50%',
        align: 'center',
        scopedSlots: { customRender: 'name' },
    },
    {
        title: '影响程度',
        dataIndex: 'rank',
        align: 'center',
        width: '15%',
        scopedSlots: { customRender: 'rank' },
    },
    {
        title: 'Operation',
        dataIndex: 'operation',
        align: 'center',
        scopedSlots: { customRender: 'operation' },
    },
];
const data = [];
const titles = ['外部输入', '外部输出', '外部查询', '内部文件', '外部接口']
for (let i = 0; i < 5; i++) {
    data.push({
        key: i.toString(),
        name: titles[i],
        simple: 0,
        average: 0,
        complex: 0
    });
};
const data1 = [];
const titles1 = ['可靠的备份与恢复', '数据通信', '分布式的功能', '性能', '大量使用的配置', '在线数据入口', '易操作性', '在线更新', '复杂接口', '复杂处理', '可重用性', '易安装性', '多场所', '容易变更']
for (let i = 0; i < 14; i++) {
    data1.push({
        key: ((i + 5) * 2).toString(),
        order: i + 1,
        name: titles1[i],
        rank: 3
    });
}
export default {
    components: {
        ContentHeader,
        ContentFooter
    },
    data() {
        this.cacheData = data.map(item => ({ ...item }));
        this.cacheData1 = data1.map(item => ({ ...item }));
        return {
            "active_step": 0,
            "form_show_loading": false,
            data,
            columns,
            editingKey: '',
            data1,
            columns1,
            editingKey1: '',

        }
    },
    computed: {
        ufc: function () {
            let count = 0;
            for (let i = 0; i < 5; i++) {
                if (data[i].name == '外部输入') {
                    count = count + data[i].simple * 3 + data[i].average * 4 + data[i].complex * 6
                } else if (data[i].name === '外部输出') {
                    count = count + data[i].simple * 4 + data[i].average * 5 + data[i].complex * 7
                } else if (data[i].name == '外部查询') {
                    count = count + data[i].simple * 3 + data[i].average * 4 + data[i].complex * 6
                } else if (data[i].name == '内部文件') {
                    count = count + data[i].simple * 5 + data[i].average * 7 + data[i].complex * 10
                } else if (data[i].name == '外部接口') {
                    count = count + data[i].simple * 7 + data[i].average * 10 + data[i].complex * 15
                }
            }
            return count
        },
        vaf: function () {
            let count = 0
            for (let i = 0; i < 14; i++) {
                count = count + Number(data1[i].rank)
                console.log(count)
            }
            return 0.65 + 0.01 * count
        }
    },
    methods: {
        next() {
            this.active_step++;
        },
        pre() {
            this.active_step--;
        },
        sure() {
            this.active_step = 0;
            this.resetUFC();
            this.resetVAF()
        },
        resetUFC() {
            for (let i = 0; i < 5; i++) {
                data[i].simple = 0,
                    data[i].average = 0,
                    data[i].complex = 0
            };
        },
        resetVAF() {
            for (let i = 0; i < 14; i++) {
                data1[i].rank = 3
            }
        },
        onSubmit(form_key = "", step_value = 0) {
            this.$refs[form_key].validate(valid => {
                if (valid) {
                    this.form_show_loading = true;
                    setTimeout(() => {
                        this.form_show_loading = false;
                        if (step_value) {
                            this.active_step = step_value;
                        }
                    }, 1500)

                } else {
                    this.$message.warning('请先完成表单内容');
                    return false;
                }
            });
        },
        resetForm(form_key = "") {
            this.$refs[form_key].resetFields();
        },
        handleChange(value, key, column) {
            const newData = [...this.data];
            const target = newData.filter(item => key === item.key)[0];
            if (target) {
                target[column] = value;
                this.data = newData;
            }
        },
        edit(key) {
            const newData = [...this.data];
            const target = newData.filter(item => key === item.key)[0];
            this.editingKey = key;
            if (target) {
                target.editable = true;
                this.data = newData;
            }
        },
        save(key) {
            const newData = [...this.data];
            const newCacheData = [...this.cacheData];
            const target = newData.filter(item => key === item.key)[0];
            const targetCache = newCacheData.filter(item => key === item.key)[0];
            if (target && targetCache) {
                delete target.editable;
                this.data = newData;
                Object.assign(targetCache, target);
                this.cacheData = newCacheData;
            }
            this.editingKey = '';
        },
        cancel(key) {
            const newData = [...this.data];
            const target = newData.filter(item => key === item.key)[0];
            this.editingKey = '';
            if (target) {
                Object.assign(target, this.cacheData.filter(item => key === item.key)[0]);
                delete target.editable;
                this.data = newData;
            }
        },
        handleChange1(value, key, column) {
            const newData = [...this.data1];
            const target = newData.filter(item => key === item.key)[0];
            if (target) {
                target[column] = value;
                this.data1 = newData;
            }
        },
        edit1(key) {
            const newData = [...this.data1];
            const target = newData.filter(item => key === item.key)[0];
            this.editingKey1 = key;
            if (target) {
                target.editable = true;
                this.data1 = newData;
            }
        },
        save1(key) {
            const newData = [...this.data1];
            const newCacheData = [...this.cacheData1];
            const target = newData.filter(item => key === item.key)[0];
            const targetCache = newCacheData.filter(item => key === item.key)[0];
            if (target && targetCache) {
                delete target.editable;
                this.data1 = newData;
                Object.assign(targetCache, target);
                this.cacheData1 = newCacheData;
            }
            this.editingKey1 = '';
        },
        cancel1(key) {
            const newData = [...this.data1];
            const target = newData.filter(item => key === item.key)[0];
            this.editingKey1 = '';
            if (target) {
                Object.assign(target, this.cacheData1.filter(item => key === item.key)[0]);
                delete target.editable;
                this.data1 = newData;
            }
        }
    }

}
</script>


<style lang="less" scoped>
@import "./base.less";
</style>